import React, { useState, useRef, useEffect, FC } from 'react';
import { Row, Col, Button, Card, Result, message, Modal } from 'antd';
import {
  StepsForm,
  ProFormText,
  ProFormSelect,
  ProFormTextArea,
} from '@ant-design/pro-form';
import type { ProFormInstance } from '@ant-design/pro-form';
import { createDao } from './service';
import { getDictType } from '@/services/services';
import { setLocalStorageInfo } from '@/utils/localStorageInfo';

type CreateDaoStepsFormPropsType = {
  setIsDao: any;
  setIsCreateDaoModal: any;
  DAOInfo: DAOInfoType;
};

type DAOTypeItemType = {
  label: string;
  value: string;
};

type DAOInfoType = {
  daoName?: string;
  daoCode?: string;
  type?: number;
  createBy?: string;
  companyProfile?: string;
  vision?: string;
  mission?: string;
};

const CreateDaoStepsForm: FC<CreateDaoStepsFormPropsType> = ({
  setIsDao,
  setIsCreateDaoModal,
  DAOInfo,
}) => {
  // 倒计时
  const [countDown, setCountDown] = useState<number>(3);
  // DAO类型
  const [DAOType, setDAOType] = useState<DAOTypeItemType[]>([]);
  // DAO信息
  const [replenishDAOInfo, setReplenishDAOInfo] = useState<DAOInfoType>({});

  useEffect(() => {
    getDAOType();
    formRef.current?.setFieldsValue(DAOInfo);
  }, []);

  /**
   * 获取DAO类型
   */
  const getDAOType = async () => {
    let res = await getDictType({
      dictType: 'dao-type',
      pageSize: 10,
      current: 1,
    });
    console.log(res);
    if (res.code === '000000')
      setDAOType(
        res.data.map((item: any) => {
          return {
            value: item.itemValue,
            label: item.label,
          };
        }),
      );
  };

  // 绑定表单
  const formRef = useRef<ProFormInstance>();
  return (
    <>
      <Card style={{ width: '100%' }}>
        <span
          style={{
            display: 'inline-block',
            width: '100%',
            textAlign: 'center',
            marginBottom: '12px',
            fontSize: '24px',
          }}
        >
          创建一个属于我的Dao组织
        </span>
        <StepsForm<{
          name: string;
        }>
          formRef={formRef}
          // 表单验证失败提示语
          formProps={{
            validateMessages: {
              required: '此项为必填项',
            },
          }}
          // 自定义按钮
          submitter={{
            render: (props) => {
              if (props.step === 0) {
                return (
                  <Button type="primary" onClick={() => props.onSubmit?.()}>
                    下一步 {'>'}
                  </Button>
                );
              }
              if (props.step === 1) {
                return [
                  <Button key="pre" onClick={() => props.onPre?.()}>
                    上一步
                  </Button>,
                  <Button type="primary" onClick={() => props.onSubmit?.()}>
                    下一步 {'>'}
                  </Button>,
                ];
              }
              if (props.step === 2) {
                return [
                  <Button key="pre" onClick={() => props.onPre?.()}>
                    上一步
                  </Button>,
                  <Button
                    type="primary"
                    key="goToTree"
                    onClick={() => props.onSubmit?.()}
                  >
                    创建
                  </Button>,
                ];
              }

              return null;
            },
          }}
        >
          {/* 一 发行信息录入*/}
          <StepsForm.StepForm
            name="base"
            title="基础信息"
            onFinish={async (values) => {
              console.log('base', values);
              setReplenishDAOInfo({
                ...replenishDAOInfo,
                ...values,
              });
              return true;
            }}
          >
            <ProFormText
              name="daoName"
              label="DAO名称"
              placeholder="请输入DAO名称"
              rules={[{ required: true }]}
            />
            <ProFormText
              name="daoCode"
              label="DAO英文名称"
              placeholder="请输入DAO英文名称"
              rules={[{ required: true }]}
            />
            <ProFormSelect
              name="type"
              label="DAO类型"
              placeholder="请选择DAO类型"
              rules={[{ required: true }]}
              options={DAOType}
            />
            <ProFormText
              name="daoOwer"
              label="创始人"
              placeholder="请输入创始人"
              rules={[{ required: true }]}
            />
            <ProFormText
              name="daoAddress"
              label="链上地址"
              placeholder="请输入创始人"
              rules={[{ required: true }]}
            />
          </StepsForm.StepForm>
          {/* 二 DAO简介*/}
          <StepsForm.StepForm
            name="token"
            title="DAO简介"
            onFinish={async (values) => {
              console.log('base', values);
              setReplenishDAOInfo({
                ...replenishDAOInfo,
                ...values,
              });
              return true;
            }}
          >
            <ProFormTextArea
              name="vision"
              label="DAO愿景"
              placeholder="请输入DAO愿景"
              rules={[{ required: true }]}
            />
            <ProFormTextArea
              name="mission"
              label="DAO使命"
              placeholder="请输入DAO使命"
              rules={[{ required: true }]}
            />
            <ProFormTextArea
              name="companyProfile"
              label="DAO简介"
              placeholder="请输入公司简介"
              rules={[{ required: true }]}
            />
          </StepsForm.StepForm>
          {/* 三 治理设置 */}
          <StepsForm.StepForm
            title="治理设置"
            onFinish={async (values) => {
              let res = await createDao({
                ...replenishDAOInfo,
                ...values,
                serialNo: DAOInfo.serialNo,
                tenantId: DAOInfo.tenantId,
              });
              console.log(res);
              if (res.code === '000000') {
                setLocalStorageInfo('tenantDao', {
                  ...DAOInfo,
                  ...replenishDAOInfo,
                  ...values,
                });
                message.success('创建成功');
                let a = countDown;
                let countDowns = setInterval(() => {
                  if (a === 1) {
                    clearInterval(countDowns);
                    setIsCreateDaoModal(false);
                    setIsDao(true);
                  }
                  setCountDown(a - 1);
                  a = a - 1;
                }, 1000);
                return true;
              }
            }}
          >
            <ProFormText
              name="date"
              label="投票期限"
              placeholder="请输入DAO名称"
              rules={[{ required: true }]}
            />
          </StepsForm.StepForm>
          {/* 四 创建完成*/}
          <StepsForm.StepForm name="time" title="创建完成">
            <Result
              status="success"
              title="创建成功！"
              subTitle={`欢迎使用Bigan数字资产管理平台`}
            />
            <span
              style={{
                display: 'inline-block',
                width: '100%',
                textAlign: 'center',
              }}
            >
              {countDown}秒后返回首页
            </span>
          </StepsForm.StepForm>
        </StepsForm>
      </Card>
    </>
  );
};

export default CreateDaoStepsForm;
